/*
 * Author： Lee
 * Create Time: 2018-02-01
 * Description: 水平开关
 * CopyRight:
 * */


import React, { Component } from 'react';

import './index.css';

export default class HorizontalDownValve extends Component {
  constructor(props) {
    super(props);
    console.log('HorizontalDownValve, props,', this.props);
    /*
     * * props 参数说明
     * x：相对位置x坐标
     * y: 相对位置y坐标
     * width： 宽度
     * height：高度
     * color: 水流颜色
     * 管道的默认颜色 #949494
     * state状态表示，开关是否打开
     * waterHeight: tank中的水流高度
     * */
    this.state = {
      work: this.props.work ? this.props.work : false,
    };
  }

  render() {
    return (
      <svg className='HorizontalUpValveBox' label={this.props.label ? this.props.label : 'HorizontalUpValve'} x={ this.props.x ? this.props.x : "1500"} y={ this.props.y ? this.props.y : "850"} width={ this.props.width ? this.props.width : "100"} height={ this.props.height ? this.props.height : "100"}>
        <svg className="HorizontalUpValveContent" viewBox="0 0 100 100">
          <g style={{ display: this.state.work ? 'block' : 'none'}}>
            <rect x="45%" y="25%" rx="0%" ry="0%" width="10%" height="50%" fill="#949494">
            </rect>
            <path d="M44,40 L56,38 M44,45 L56,43 M44,50 L56,48 M44,55 L56,53 M44,60 L56,58 M44,65 L56,63 M44,70 L56,68 M44,75 L56,73 " strokeWidth="2" opacity="0.7" stroke="#303030">
            </path>
            <rect x="5%" y="5%" rx="10%" ry="10%" width="90%" height="20%" fill="#949494">
            </rect>
          </g>
          <rect x="25%" y="95%" rx="0" ry="0" width="50%" height="5%" fill="#949494">
          </rect>
          <rect x="30%" y="75%" rx="5%" ry="5%" width="40%" height="20%" fill="#949494">
          </rect>
          <g style={{ display: this.state.work ? 'none' : 'block'}}>
            <rect x="45%" y="60%" rx="0%" ry="0%" width="10%" height="15%" fill="#949494">
            </rect>
            <rect x="5%" y="40%" rx="10%" ry="10%" width="90%" height="20%" fill="#949494">
            </rect>
            <circle cx="50%" cy="50%" r="25%" className="valveStopSignBackground">
            </circle>
            <circle cx="50%" cy="50%" r="22%" className="valveStopSignBorder">
            </circle>
            <rect x="35%" y="45%" rx="0%" ry="0%" width="30%" height="10%" className="valveStopSignBrick">
            </rect>
          </g>
          <g className="focus">
            <circle cx="50%" cy="50%" r="10%" className="crossHair">
            </circle>
            <circle cx="50%" cy="50%" r="5%" className="crossHair">
            </circle>
            <rect x="5%" y="5%" width="90%" height="90%" rx="5%" ry="5%" className="crossHair">
            </rect>
          </g>
        </svg>
      </svg>
    );
  }
}
